<template>
  <el-pagination
      v-model:current-page="pageProps.pageNum"
      v-model:page-size="pageProps.pageSize"
      :total="pageProps.total"
      hide-on-single-page
      layout="total, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleSearch"
  />
</template>

<script lang="ts" setup>
/**
* pagination组件
* 支持el-pagination的所有属性、事件
* @prop pageProps 分页参数 {pageNum, pageSize, total}
* @event search 搜索方法
* */
import { nextTick } from 'vue';

const props = defineProps({
  pageProps: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits(['search'])

const handleSearch = (page: number) => {
  props.pageProps.pageNum = page
  nextTick(() => {
    emit('search')
  })
}

const handleSizeChange = (size: number) => { 
    props.pageProps.pageSize = size
    handleSearch(1)
 }

</script>

<style lang="scss" scoped>
$pageWidth: 30px;
$pageHeight: 28px;
$font: 12px;
.el-pagination {
  justify-content: flex-end;
  margin-top: $gutterLarge;
  font-size: $font;
  :deep(.el-pager){
     li {
      min-width: $pageWidth;
      height: $pageHeight;
      padding: 0 2px;
      border: 1px solid var(--el-border-color);
      line-height: $pageHeight;
      &.is-active {
        border-color: $mainColor;
        background-color: $mainColor;
        color: #fff;
      }
    }
    li + li {
      margin-left: 10px;
    }
  }
  :deep(.el-select .el-input){
    width: 100px;
    height: $pageHeight;
    font-size: $font;
  }
  :deep(.el-input__wrapper) {
    height: $pageHeight;
    font-size: $font;
  }
}
</style>
